<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>


<script type="text/javascript" src="/tour/js/jquery.js"></script>
<script type="text/javascript" src="/tour/js/jquery-ui.js"></script>
<link type="text/css" href="/tour/css/jquery-ui.css" rel="stylesheet">
<link type="text/css" href="/tour/css/resistmember.css" rel="stylesheet">
<link type="text/css"	href="/tour/css/jquery-ui.css" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function(){
	$("#cmailL").change(function(){
		$("#cmailL option:selected").each(function(){
			if($(this).val()=='direct'){
				$("#cemail").val("");
				$("#cemail").attr("readonly",false);
			}else{
				$("#cemail").val($(this).text());
				$("#cemail").attr("readonly",true);
			}
		});
	});

	
	var cyear=$("#cyear").get(0);
	for(var i=0;i<75;i++){	cyear[i+1] = new Option(i+1940);cyear[i+1].value=i+1940;}
	var cmonth=$("#cmonth").get(0);
	for(var i=0;i<12;i++){	cmonth[i+1] = new Option(i+1);cmonth[i+1].value=i+1;}
	var cday=$("#cday").get(0);
	for(var i=0;i<31;i++){	cday[i+1] = new Option(i+1);cday[i+1].value=i+1;}
	
	
	var cmailL=$("#cmailL").get(0);
	cmailL[0] = new Option("직접입력하세요");cmailL[0].value="direct";
	cmailL[1] = new Option("hanmail.net");cmailL[1].value="hanmail.net";
	cmailL[2] = new Option("naver.com");cmailL[2].value="naver.com";
	cmailL[3] = new Option("gmail.com");cmailL[3].value="gmail.com";
	
	
	var cphone11=$("#cphone").get(0);
	cphone11[1] = new Option("SKT");cphone11[1].value="SKT";
	cphone11[2] = new Option("KT");cphone11[2].value="KT";
	cphone11[3] = new Option("LGU+");cphone11[3].value="LGU+";
	
	
	var cphone12=$("#cphone1").get(0);
		cphone12[1] = new Option("010");cphone12[1].value="010";
		cphone12[2] = new Option("011");cphone12[2].value="011";
		cphone12[3] = new Option("016");cphone12[3].value="016";
		cphone12[4] = new Option("017");cphone12[4].value="017";
		cphone12[5] = new Option("019");cphone12[5].value="019";

	var chintq13=$("#chintq").get(0);
		chintq13[1] = new Option("당신의 보물1호는?");chintq13[1].value="당신의 보물1호는?";
		chintq13[2] = new Option("졸업한 초등학교의 이름은?");chintq13[1].value="졸업한 초등학교의 이름은?";
		chintq13[3] = new Option("당신의 첫경험 나이는?");chintq13[1].value="당신의 첫경험 나이는";
		chintq13[4] = new Option("당신의 첫사랑 이름은?");chintq13[1].value="당신의 첫사랑 이름은?";
		chintq13[5] = new Option("존경하는 인물의 이름은?");chintq13[1].value="존경하는 인물의 이름은?";
	//text, password, textarea에 값이 있는지 없는지 체크


	$("#join1").on("click",function(){
	if($("#cid").val().length==0){alert("아이디를 입력해주세요");$("#cid").focus();return false;}
	if($("#cpwd").val().length==0){alert("비밀번호를 입력해주세요");$("#cpwd").focus();return false;}
	if($("#cname").val().length==0){alert("이름을 입력하세요");$("#cname").focus();return false;}
	if($("#cyear").val()=='defualt'){alert("년도를 선택하세요");$("#cyear").focus();return false;}
	if($("#cmonth").val()=='defualt'){alert("월을 선택하세요");$("#cmonth").focus();return false;}
	if($("#cday").val()=='defualt'){alert("날짜를 선택하세요");$("#cday").focus();return false;}
	if($("#cphone").val()=='defualt'){alert("통신사를 선택해주세요");$("#cphone").focus();return false;}
	if($("#cphone1").val()=='defualt'){alert("폰번호를 선택해주세요");$("#cphone1").focus();return false;}
	if($("#cphone2").val().length==0){alert("가운데 폰번호를 입력해주세요");$("#cphone2").focus();return false;}
	if($("#cphone3").val().length==0){alert("마지막 폰번호를 입력해주세요");$("#cphone3").focus();return false;}
	if($("#chintq").val().length==0){alert("질문을 선택해주세요");$("#chintq").focus();return false;}
	if($("#chinta").val().length==0){alert("질문답을 써주세요");$("#chinta").focus();return false;}
	if($("#czipcode").val().length==0){alert("우편번호를 입력해주세요");$("#czipcode").focus();return false;}
	if($("#caddress").val().length==0){alert("주소를 입력해주세요");$("#caddress").focus();return false;}
	
	$("#f1").attr("action","/tour/customer/join.do").submit();
});

$("#rejoin1").on("click",function(){parent.location.replace("/tour/index.jsp");});



});

function idCheck(){
	window.open("/tour/customer/idCheck.jsp","","width=500,height=400,resizable=no");
}


function popupAddress(){
	window.open("/tour/customer/address_popup.jsp","","width=500,height=400,resizable=no");
}


</script>








<style type="text/css">

#container{
	width:1100px;
	
	margin:auto;/*센터로 정렬시킨다*/
}
#head{
	padding: 5px;
	height: 10px;
	text-align: right;	
	

}


#top{
	padding: 5px;
	text-align: center;	
	
	  /*border를 1px씩 주게 되면 width가 딱맞게 만들 경우 선때문에 outer공간이 모자라 모양이 깨진다.*/
}




#header{
	padding: 5px;
	text-align: center;	
/*	
	border:1px solid gray;
	*/
	  /*border를 1px씩 주게 되면 width가 딱맞게 만들 경우 선때문에 outer공간이 모자라 모양이 깨진다.*/
}



#left{
	padding: 5px;
	width:180px;/*height는 주지 않는다. 내용에 따라 늘어나도록 처리하기 위해*/
	float:left;/*경계선 때문에*/
	/*clear:both;*/
}

#content{
	padding: 5px;
	width:820px;/*height는 주지 않는다. 내용에 따라 늘어나도록 처리하기 위해*/
	float:left;/*경계선 때문에*/
	/*clear:both;*/
}






#footer{
	padding-top:5px;
	
	clear:both;  /*이것이 없으면 left, content 아래로 들어가 버린다.*/
	text-align:center;
	height:50px;
}
</style>
</head>
<body>
<div id="container" >
	
	<div id="head">
		<jsp:include page="/templates/header.jsp"/>
	</div>
	
	<div id="top">
		<jsp:include page="/templates/top.jsp"/>
	</div>
	

	<div id="header">
		<jsp:include page="/templates/top_menu.jsp"/>
	</div>



	<div id="left" >
		<jsp:include page="/templates/banner.jsp"/>
		
	</div>
	
		<div id="content" >
		
		
		
		
<form action="/join_success.jsp" method="post" id="f1" name="join_form">
<fieldset >
<legend style="display: none;">회원가입 정보 입력 폼</legend>
	<table align="center" > 
		<thead><th colspan="2"><span id="tit_img"></span></th>
		</thead>
		<tbody>
			<tr>
				<td id="tit1"><span class="tit" >아이디</span></td><td class="inparam"><input type="text" name="cid" id="cid"size="8" readonly="readonly">
				<input type="button" id="reCheck" name="reCheck"  value="중복확인" onclick="idCheck();"></td>
			</tr>
			<tr>
				<td id="tit8"><span class="tit">비밀번호</span></td><td class="inparam"><input type="password" name="cpwd" id="cpwd" size="8"></td>
			</tr>
			<tr>
				<td id="tit2"><span class="tit">이름</span></td><td class="inparam"><input type="text" name="cname" id="cname" size="8"></td>
			</tr>
			<tr>
				<td id="tit3"><span class="tit">성별</span></td><td class="inparam"><input type="radio" name="csex" id="csexm">남<input type="radio" name="csex" id="csexl">여</td>
			</tr>
			<tr>
				<td id="tit4"><span class="tit">닉네임</span></td><td class="inparam"><input type="text" name="cnick" id="cnick" size="8"></td>
			</tr>
			
			<tr>
				<td id="tit5"><span class="tit">생년월일</span></td><td class="inparam">
					<select id="cyear" name="nyear"><option value="defualt">년도</option></select>
					<select id="cmonth" name="nmonth"><option value="defualt">월</option></select>
					<select id="cday" name="nday"><option value="defualt">일</option></select>
				</td>
			</tr>
			<tr>
				<td id="tit6"><span class="tit">E-MAIL</span></td><td class="inparam">
				<input type="text" name="cemail" id="cmail" size="15">@<input type="text" name="cemail" id="cemail" size="20">
				<select id="cmailL" name="nmail"><option value="defualt">E-MAIL</option></select></td>
			</tr>
			<tr>
				<td id="tit7"><span class="tit">휴대전화</span></td><td class="inparam" >	
					<select id="cphone" name="nphone">
						<option value="defualt">통신사</option>
					</select>		
					<select id="cphone1" name="nphone1">
						<option value="defualt">---</option>
					</select>	
					-<input type="text" name="nphone2" id="cphone2" size="5" maxlength="4">-<input type="text" name="nphone3" id="cphone3" size="5" maxlength="4">
				</td>
			</tr>
			<tr>
				<td id="tit9"><span class="tit">질문</span></td><td class="inparam">
					<select id="chintq" name="chintq">
						<option value="defualt"/>
					</select>
				</td>
			</tr>
			<tr>
				<td id="tit12"><span class="tit">질문 답</span></td><td class="inparam"><input type="text" name="chinta" id="chinta" size="20"></td>
			</tr>
			<tr>
					<td id="tit10"><span class="tit">우편번호</span></td><td class="inparam"><input type="text" name="czipcode" id="czipcode" size="8">
					<input type="button" name="zipcode1" id="zipcode2" value="우편번호 찾기" onclick="popupAddress()"></td>
				</tr>
				<tr>
					<td id="tit11"><span class="tit">주소</span></td><td class="inparam"><input type="text" name="caddress" id="caddress" size="24">
					<br><input type="text" name="address" id="address" size="24"></td>
				</tr>

		</tbody>
		
	</table>
	<input type="hidden" name="command" value="register">	
	<p id="btnArea">
	</p>
	</fieldset>	

</form>
<center>
					<input type="button" id="join1" value=""	 alt="회원가입">
					<input type="button" id="rejoin1" value="" value="" onclick="move_main();" alt="취소">
					<p>${requestScope.error_message }</p>
</center>








	<div id="footer" >
		<jsp:include page="/templates/footer.jsp"/>
	</div>
</div>

</body>
</html>




















